import { Checkbox, Button } from 'antd';
import './index.scss'

function Footer(props) {

    const { todos, clearTodos, CheckTodoAll } = props

    const finishedArr = todos.filter(item => {

        return item.isDone

    })

    const handleClear = () => {
        clearTodos()
    }

    const isCheckAll = () => {
        return todos.every(item => item.isDone)
    }


    const handleCheckAll = (e) => {
        // console.log(e.target.checked);
        const list = todos.map(item => ({...item, isDone: e.target.checked}))
        CheckTodoAll(list)
    }

    return (
        <div className='footer'>
            <div>
                <label>

                    <Checkbox checked={isCheckAll() && todos.length > 0 } onChange={handleCheckAll}></Checkbox>

                </label>

                <span>

                    <span>已完成{finishedArr.length}</span> / 全部{todos.length}

                </span>
            </div>

            <Button type='primary' danger size='small' onClick={handleClear}>清除已完成任务</Button>
        </div>
    )
}

export default Footer